<template>
  <div
    class="content"
    style="
      display: flex;
      color: #1d66a9;
      height: 100%;
      justify-content: space-between;
      margin: auto;
    "
  >
    <div
      ref="engine"
      class="con-c"
      style="
        width: 1200px;
        display: flex;
        flex-direction: column;
        position: relative;
      "
    >
      <!-- <div style="flex: 1" @click="goToDataDetail">
				<el-image style="height: 500px" :src="con1" fit="fit" />
			</div> -->
      <PixiCanvas></PixiCanvas>
      <canvas ref="engineGraphic" @click="handleClickCLX($event)"></canvas>
      <CardBox
        :custom-style="{
          width: '135px',
          height: '124px',
          top: '129px',
          left: '318px',
        }"
      >
        <CardData
          type="齿轮箱油温"
          :data="GearboxData.clxyw.data"
          unit="/℃"
          :decimal="GearboxData.clxyw.dl"
        ></CardData>
        <CardData
          type="齿轮箱油压"
          :data="GearboxData.clxyy.data"
          unit="/bar"
          :decimal="GearboxData.clxyy.dl"
        ></CardData>
      </CardBox>

      <CardBox
        :custom-style="{
          width: '303px',
          height: '131px',
          top: '144px',
          left: '493px',
        }"
        path="/Equipment/host"
      >
        <CardBox>
          <CardData
            type="滑油压力"
            :data="HostboxData.zjhyyl.data"
            unit="/bar"
            :decimal="HostboxData.zjhyyl.dl"
          ></CardData>
          <CardData
            type="冷却水温"
            :data="HostboxData.zjlqsw.data"
            unit="/℃"
            :decimal="HostboxData.zjlqsw.dl"
          ></CardData>
          <CardData
            type="滑油温度"
            :data="HostboxData.zjrywd.data"
            unit="/℃"
            :decimal="HostboxData.zjrywd.dl"
          ></CardData>
        </CardBox>
        <div
          :ref="setgaugeRefItem"
          style="
            width: 500px;
            height: 500px;
            transform: scale(0.35, 0.35);
            position: absolute;
            bottom: -192px;
            left: 51px;
          "
        ></div>
      </CardBox>

      <CardBox
        :custom-style="{
          width: '200px',
          height: '80px',
          top: '313px',
          left: '261px',
        }"
      >
        <CardBox>
          <CardData
            type="滑油压力"
            :data="HostboxData.zjhyyl.data"
            unit="/bar"
            :decimal="HostboxData.zjhyyl.dl"
          ></CardData>
          <CardData
            type="冷却水温"
            :data="HostboxData.zjlqsw.data"
            unit="/℃"
            :decimal="HostboxData.zjlqsw.dl"
          ></CardData>
          <CardData
            type="滑油温度"
            :data="HostboxData.zjrywd.data"
            unit="/℃"
            :decimal="HostboxData.zjrywd.dl"
          ></CardData>
        </CardBox>
        <div
          style="
            width: 400px;
            height: 400px;
            transform: scale(0.3, 0.3);
            position: absolute;
            bottom: -170px;
            left: -18px;
          "
        ></div>
      </CardBox>
      <CardBox
        :custom-style="{
          width: '245px',
          height: '80px',
          top: '400px',
          left: '261px',
        }"
      >
        <CardBox>
          <CardData
            type="滑油压力"
            :data="HostboxData.zjhyyl.data"
            unit="/bar"
            :decimal="HostboxData.zjhyyl.dl"
          ></CardData>
          <CardData
            type="冷却水温"
            :data="HostboxData.zjlqsw.data"
            unit="/℃"
            :decimal="HostboxData.zjlqsw.dl"
          ></CardData>
          <CardData
            type="滑油温度"
            :data="HostboxData.zjrywd.data"
            unit="/℃"
            :decimal="HostboxData.zjrywd.dl"
          ></CardData>
        </CardBox>
        <div
          style="
            width: 400px;
            height: 400px;
            transform: scale(0.3, 0.3);
            position: absolute;
            bottom: -170px;
            left: -18px;
          "
        ></div>
      </CardBox>
      <CardBox
        :custom-style="{
          width: '245px',
          height: '80px',
          top: '480px',
          left: '261px',
        }"
      >
        <CardBox>
          <CardData
            type="滑油压力"
            :data="HostboxData.zjhyyl.data"
            unit="/bar"
            :decimal="HostboxData.zjhyyl.dl"
          ></CardData>
          <CardData
            type="冷却水温"
            :data="HostboxData.zjlqsw.data"
            unit="/℃"
            :decimal="HostboxData.zjlqsw.dl"
          ></CardData>
          <CardData
            type="滑油温度"
            :data="HostboxData.zjrywd.data"
            unit="/℃"
            :decimal="HostboxData.zjrywd.dl"
          ></CardData>
        </CardBox>
        <div
          style="
            width: 400px;
            height: 400px;
            transform: scale(0.3, 0.3);
            position: absolute;
            bottom: -170px;
            left: -18px;
          "
        ></div>
      </CardBox>
    </div>
    <div style="width: 200px; display: flex">LNG信息</div>
    <div class="con-r" style="width: 100px; display: flex">
      {{ $("index") }}
    </div>
    <div
      style="
        display: flex;
        width: 200px;
        box-sizing: border-box;
        flex-direction: column;
      "
    >
      <div style="padding: 20px">
        <el-image style="height: 100px; width: 100px" :src="vv" fit="fit" />
      </div>
      <div style="padding: 20px">
        <el-image style="height: 100px; width: 100px" :src="vv" fit="fit" />
      </div>
      <div style="padding: 20px">
        <el-image style="height: 100px; width: 100px" :src="vv" fit="fit" />
      </div>
      <div style="padding: 20px">
        <el-image style="height: 100px; width: 100px" :src="vv" fit="fit" />
      </div>
      <div style="padding: 20px">
        <el-image style="height: 100px; width: 100px" :src="vv" fit="fit" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted, computed, inject, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
// import con1 from '@/assets/image/con1.png'
import vv from "@/assets/image/vv.png";
// 组件
import EngineList from "./component/models/EngineList.vue";
import CardData from "./component/layout/CardData.vue";
import CardBox from "./component/layout/CardBox.vue";
// 工具
import { getRandomInRange } from "@/utils/utils.js";
import {
  getEngieDate,
  engieDate,
  GearboxData,
  HostboxData,
  color,
} from "@/mixins/globalParam.js";
import {
  hostboxGraphic,
  gearboxGraphic,
  generatorGraphic,
  dieselGraphic,
  cargoOilGraphic,
  clutchGraphic,
  motorGraphic,
  sweepCargoGraphic,
  steeringGraphic,
  tailShaftGraphic,
  testGraphic,
  gbGraphic,
} from "@/mixins/globalRaphael.js";
// 图形组件
import PixiCanvas from "./graphic/index.vue";
let { path } = useRoute();
let router = useRouter();
// 初始化
let Echarts = inject("$echarts");
// 获取DOM
let gaugeRef = ref([]);
let engineGraphic = ref(null);
let engine = ref(null);
let ctx = ref(null);
let setgaugeRefItem = (el) => {
  gaugeRef.value.push(el);
};
// console.log('======齿轮', inject('echarts'))
// 齿轮箱故障情况
const GearboxFailure = computed(() => {
  // 机器内部情况故障
  let Gear = GearboxData.value;
  // --------------------参数
  // 正车压力
  let zcyl = Gear.clxz.data;
  // 倒车压力
  let dcyl = Gear.clxd.data;
  // 温度
  // let wd = Gear.clxw
  //----------------------零界点
  // 空车 正车 倒车 零界点(4)
  let zfyl_point = 4;
  // ---------------------转态
  // 报警状态
  if (Gear.clxyw.data >= 75 || Gear.clxyy <= 1) return 3;
  // 空机状态
  if (zcyl <= zfyl_point && dcyl <= zfyl_point) return 0;
  // 正车转态
  if (zcyl >= zfyl_point && dcyl <= zfyl_point) return 1;
  // 倒车转态
  if (zcyl <= zfyl_point && dcyl >= zfyl_point) return 2;
  return 1;
  // 机器外部故障
  // if (GearboxData.value.clxyw < 200) return 2
  // return 1;
});
// 主机故障情况
const HostboxFailure = computed(() => {
  // 机器内部情况故障
  let Host = HostboxData.value;
  // --------------------参数
  let hyyl = Host.zjhyyl.data;
  let lqsw = Host.zjlqsw.data;
  let rywd = Host.zjrywd.data;
  let zs = Host.zjzs.data;
  // 温度
  // let wd = Gear.clxw
  //----------------------零界点
  let hyyl_point = 2.5;
  let lqsw_point = 90;
  let rywd_point = 80;
  let zs_point = 200;
  // ---------------------转态
  // 报警
  if (hyyl <= hyyl_point) return 3;
  if (lqsw >= lqsw_point) return 3;
  if (rywd >= rywd_point) return 3;
  if (zs >= zs_point) return 1;
  if (zs <= zs_point) return 0;
  // 机器外部故障
  // if (GearboxData.value.clxyw < 200) return 2
  // return 1;
});

// 事件
let handleClickCLX = (e) => {
  // console.log("=======handleClickCLX",e.offsetX,e.offsetY)
  // console.log("========",ctx.isPointInPath(e.offsetX,e.offsetY))
};

// echarts 部分
// 仪表盘
let gaugeGraphics = ref([]);
const option = ref({
  series: [
    {
      type: "gauge",
      min: 0,
      max: 1000,
      progress: {
        show: true,
        width: 18,
      },
      axisLine: {
        lineStyle: {
          width: 18,
        },
      },
      startAngle: 180,
      endAngle: 0,
      axisTick: {
        show: true,
        splitNumber: 5,
      },
      splitNumber: 4,
      splitLine: {
        length: 15,
        lineStyle: {
          width: 2,
          color: "#999",
        },
      },
      title: {
        fontSize: 20,
        lineHeight: 70,
      },
      detail: {
        show: true,
      },
      axisLabel: {
        distance: 25,
        color: "#999",
        fontSize: 16,
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 25,
        itemStyle: {
          borderWidth: 10,
        },
      },
      title: {
        show: false,
      },
      detail: {
        valueAnimation: true,
        fontSize: 50,
        offsetCenter: [0, "30%"],
        lineHeight: 20,
      },
      // data: [0,250,500,750,1000]
      data: [0],
    },
  ],
});
let setgaugeGraphics = () => {
  console.log("========", gaugeRef.value);
  gaugeRef.value.forEach((item) => {
    gaugeGraphics.value.push(Echarts.init(item));
  });
  gaugeGraphics.value.forEach((item) => {
    item.setOption(option.value);
  });
};
watch(
  GearboxData,
  (newVal, oldVal) => {
    let colorInd = GearboxFailure.value;
    // console.log('==========GearboxData', color[colorInd])
    gearboxGraphic({
      ctx,
      clr: color[colorInd],
    });
  },
  {
    deep: true,
  }
);
// 监听数据
watch(
  HostboxData,
  (newVal, oldVal) => {
    // console.log('HostboxData===-===', option.value.series[0].data[0], newVal.zjzs.data)
    option.value.series[0].data[0] = newVal.zjzs.data;
    gaugeGraphics.value.forEach((item) => {
      item.setOption(option.value);
    });
    let colorInd = HostboxFailure.value;
    // console.log("computed===",color[colorInd],color)
    hostboxGraphic({ ctx, clr: color[colorInd], y: 0 });
    generatorGraphic({
      ctx,
      clr: color[colorInd],
    });
    generatorGraphic({
      ctx,
      clr: color[colorInd],
      y: 85,
    });
    generatorGraphic({
      ctx,
      clr: color[colorInd],
      y: 165,
    });
  },
  {
    deep: true,
  }
);
// 生命周期
onMounted(() => {
  setgaugeGraphics();
  getEngieDate(timer);
  let el = engineGraphic.value;
  ctx = el.getContext("2d");
  let engines = engine.value;
  let targetWidth = engines.offsetWidth;
  let targetHeight = engines.offsetHeight;
  console.log("======", targetWidth, targetHeight);
  el.width = targetWidth;
  el.height = targetHeight;
  gbGraphic({
    ctx,
  });
  // ctx.imageSmoothingEnabled = true
  hostboxGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    // y:0
  });
  hostboxGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 520,
  });
  gearboxGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
  });
  gearboxGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 525,
  });
  generatorGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
  });
  generatorGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 85,
  });
  generatorGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 165,
  });
  dieselGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
  });
  cargoOilGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
  });
  cargoOilGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 255,
  });
  cargoOilGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 532,
  });
  clutchGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 0,
  });
  clutchGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 255,
  });
  clutchGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 532,
  });
  motorGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
  });
  sweepCargoGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
  });
  steeringGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
  });
  steeringGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 527,
  });
  tailShaftGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    // y:527
  });
  testGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
  });
  tailShaftGraphic({
    ctx,
    clr: "rgba(192, 192, 192, 1)",
    y: 530,
  });
});
onUnmounted(() => {
  clearInterval(timer.value);
});
// 路由
let timer = ref(null);
let goToDataDetail = () => {
  router.push({
    path: "/detail",
  });
};
</script>

<style lang="scss" scoped>
.content {
  font-size: 32px;
  text-align: center;
  // line-height: 10rem;
  .con-c {
    background: url("../../assets/image/con1header.png") no-repeat;
    background-size: 100% 100%;
    object-fit: cover;
    // .content {
    // 	& > div {
    // 		margin-right: 5px;
    // 	}
    // }
  }
  canvas {
    // width: 100%;
    // height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
  }
}
</style>
